<template>
  <div class="percentage">
    <div class="bar" :style="{ width: num + '%' }">
      <div class="line1"></div>
      <div class="line2"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  defineOptions({ name: 'Percentage' });

  defineProps({
    num: { type: Number, default: 0 },
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .percentage {
    width: 426px;
    height: 8px;
    background: #003E7E;
    .bar {
      width: 100px;
      height: 100%;
      position: relative;
      &::after {
        content: '';
        width: 4px;
        height: 12px;
        background: url(./images/diamond.png) no-repeat;
        background-size: contain;
        position: absolute;
        right: -3px;
        top: -1px;
      }
      .line1 {
        width: 100%;
        height: 4px;
        background: linear-gradient(270deg, #06B7FD 58.86%, #037AFF 83.84%, rgba(3, 122, 255, 0) 105.43%);
      }
      .line2 {
        width: 100%;
        height: 4px;
        background: linear-gradient(270deg, #00A6E7 57.38%, #0169DD 83.17%, rgba(1, 105, 221, 0) 105.45%);
      }
    }
  }
</style>
